@import "./elplus.scss"; //element-plus公共组件

html, body{
  width: 100%!important;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
::-webkit-scrollbar-track {
  /*外层轨道*/
  // background: rgba(56, 68, 115, 0.6);
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: rgba(144, 147, 153, .3);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  /*滚动条里面小方块*/
  background: rgba(144, 147, 153, .5);
}


//趋势颜色
.trend-red{
  color: #FF595B !important;
}
.trend-green{
  color: #38DB88 !important;
}


//设置上下内边距距离
$marginList: 8,16,18,22,24,25,27,32,36;
@each $marginItem in $marginList {
  .mb-#{$marginItem} {
    margin-bottom: pxTvh($marginItem);
  }
  .mt-#{$marginItem} {
    margin-top: pxTvh($marginItem);
  }
}

//拥堵等级颜色设置
$conColorMap: ("red" : #F76560,
        "orange" : #FBACA3,
        "yellow" : #FFCF8B,
        "green" : #6ACEAA,
    );
@each $key,
$val in $conColorMap {
  .con-level-#{$key} {
      color:  $val;
  }
  .con-level-bg-#{$key} {
      background:  $val;
  }
}

//无背景标题
.no-bg-title{
  height: 21px;
  font-size: 14px;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #3E4E6A;
  line-height: 16px;
}


//侧边栏样式-内部
.side-back{
  height: 100%;
  background: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.15) -20px 0px 20px -20px, rgba(0, 0, 0, 0.15) 20px 0 20px -20px, 0 6px 6px -6px rgba(0, 0, 0, 0.1) inset;
  padding: 0 pxTvw(4);
  box-sizing: border-box;
}
.side-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: pxTvh(16) pxTvw(24) pxTvh(16) pxTvw(20);
  box-sizing: border-box;

  flex: none;
  order: 0;
  flex-grow: 0;
  overflow-y:auto;
}
.darkness-side-back{
  height: 100%;
  background: rgba(0,48,142,0.3);
  box-shadow: rgba(0, 0, 0, 0.15) -20px 0px 20px -20px, rgba(0, 0, 0, 0.15) 20px 0 20px -20px, 0 6px 6px -6px rgba(0, 0, 0, 0.1) inset;
  padding: 0 pxTvw(4);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
}
.darkness-side-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: pxTvh(16) pxTvw(28);
  box-sizing: border-box;

  flex: none;
  order: 0;
  flex-grow: 0;
  overflow-y:auto;
}

//全局弹框关闭 文字大小
.window_close{
  em {
      @include computed_font(64);
    }
}

/**
   关于  样式
 */
.el-message-box.about-Popup{
  background: rgba(255, 255, 255, 0);
  border-radius: 4px;
  border: none;
  padding-bottom: 0;
  width: pxTvw(468);
  height: pxTvh(172);
  max-width: pxTvw(478);
  .el-message-box__header{
    padding: 0;
    .el-message-box__headerbtn{
      top: pxTvh(16);
      right: pxTvw(10);
      @include computed_font(14);
      z-index: 10;
    }
  }
  .el-message-box__content{
    padding: 0;
    .el-message-box__container{
      .el-message-box__message{
        p{
          margin: 0;
        }
      }
    }
  }
  .el-message-box__btns{
    padding: 0;
  }
  .back-img{
    width: pxTvw(468);
    height: pxTvh(172);
    object-fit: fill;
  }
  .about-content{
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    padding: pxTvh(42)  pxTvw(56);
    width: 100%;
    box-sizing: border-box;
    .about-left{
      border: 1px solid rgba(112,183,255,0.5);
      padding: pxTvh(6);
      width: pxTvh(76);
      height: pxTvh(76);
      margin-right: pxTvw(32);
      box-sizing: border-box;
      .img-box{
        width: pxTvh(64);
        height: pxTvh(64);
        img{
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }
    }
    .about-right{
      @include computed_font(16);
      font-family: PingFangSC-Medium, PingFang SC, sans-serif;
      font-weight: 500;
      color: #B2DFF5;
      div{
        line-height: pxTvh(24);
        margin-bottom: pxTvh(3);
      }
      .version{
        @include computed_font(14);
        font-weight: 400;
        color: #A1BECD;
        line-height: pxTvh(20);
        margin-top: pxTvh(17);
      }
    }
  }
}

/**
  左侧列表公用菜单
*/
.public-nav{
  height: pxTvh(32);
  display: flex;
  align-items: center;
  &>.item{
   flex: 1;
   height: pxTvh(32);
   line-height: pxTvh(32);
   text-align: center;
   background: #F1F1F1;
  //  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
   border-radius: 8px 8px 0px 0px;
   opacity: 1;
   font-size: 14px;
   font-family: Source Han Sans CN-Regular, Source Han Sans CN;
   font-weight: 400;
   color: #3A3774;
   cursor: pointer;
  }
  &>.active{
   background-color:#ffffff;
   font-weight: bold;
   color: #377DFF;
   box-shadow:none;
  }
}
/**
  custom tab
*/
 .public-tab {
  position: absolute;
  top: pxTvh(-28);
  right: 0;
  display: flex;
  justify-content: flex-end;
  border-radius: 4px;
  overflow: hidden;
  z-index: 10;
  & > .item {
    padding: pxTvh(4) pxTvw(12);
    height: pxTvh(20);
    background: #ffffff;
    color: #b0b7c3;
    font-weight: bold;
    @include computed_font(12);
    opacity: 1;
    border: 1px solid #ebeef2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  & > .chart {
    // border-radius: 4px 0px 0px 4px;
    border-right: none;
  }

  & > .table {
    // border-radius: 0px 4px 4px 0px;
  }
  & > .is-active {
    background-color: #fafbfc;
    color: #000;
  }
}

.tooltip-back-bar{
  background-color: linear-gradient(180deg, #F3F4FE 0%, rgba(243,244,254,0) 100%) !important;
  color:rgba(39, 39, 46, 1);
  backdrop-filter: blur(5px);
}
.tooltip-dark-back{
  backdrop-filter: blur(5px);
  background: rgba(130,174,255,0.2);
  color: #E8F3FF;
}
.mask_div{
  display: none!important;
}

/**
 全息路口车辆与车速的展示框
 */
.car-mes-on-map{
  min-width: pxTvw(80);
  text-align: center;
  // position: absolute;
  // background: linear-gradient(144deg, rgba(0,38,95,0.96) 0%, rgba(0,38,95,0.56) 80%, rgba(0,67,96,0) 100%);
  // border: 1px solid;
  // border-image: linear-gradient(142deg, rgba(10, 180, 255, 1), rgba(255, 255, 255, 1)) 1 1;
  // padding: pxTvh(4) pxTvw(11);
  // transform: translateX(-50%);
  // color: #FFFFFF;
  // font-weight: 400;
  // @include computed_font(18);
  // font-family: PangMenZhengDao-Regular, PangMenZhengDao, sans-serif;
  height: pxTvh(22);
  padding: pxTvh(2) pxTvw(5);
  @include computed_font(14);
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  text-shadow: 0px pxTvw(2) pxTvw(13) #2AB1E7;
  position: absolute;
  background: rgba(85, 157, 241, 0.5);
  opacity: 1;
  border: 1px solid #2AB1E7;
  border-radius: pxTvw(5);
  line-height: pxTvh(22);
  // background: linear-gradient(144deg, rgba(0,38,95,0.96) 0%, rgba(0,67,96,0) 100%);
  // box-shadow: inset 0px pxTvw(-5) pxTvw(11) 0px #13B7FF;
  // border-radius: pxTvw(46) pxTvw(46) pxTvw(46) pxTvw(46);
  // opacity: 1;
  // // border: 1px solid;
  // border-image: linear-gradient(142deg, rgba(10, 180, 255, 1), rgba(255, 255, 255, 1)) 1 1;
}
//旧版
// .car-mes-on-map{
//   min-width: pxTvw(100);
//   text-align: center;
//   position: absolute;
//   background: linear-gradient(144deg, rgba(0,38,95,0.96) 0%, rgba(0,38,95,0.56) 80%, rgba(0,67,96,0) 100%);
//   border: 1px solid;
//   border-image: linear-gradient(142deg, rgba(10, 180, 255, 1), rgba(255, 255, 255, 1)) 1 1;
//   padding: pxTvh(4) pxTvw(11);
//   transform: translateX(-50%);
//   color: #FFFFFF;
//   font-weight: 400;
//   @include computed_font(18);
//   font-family: PangMenZhengDao-Regular, PangMenZhengDao, sans-serif;
// }
.analyse-content{
  width: 100%;
  height: 100%;
  padding: pxTvh(24) pxTvw(24);
  box-sizing: border-box;
  &>.nav{
    margin-bottom: pxTvh(20);
    width: 100%;
    height: pxTvh(64);
    padding: pxTvh(0) pxTvw(32);
    background-color: #13264F;
    box-sizing: border-box;
    .el-form{
      height: 100%;
      display: flex;
      align-items: center;
      &>.el-form-item{
        margin-right: pxTvw(24);
        margin-bottom: 0;
        .el-select{
          width: pxTvw(168);
        }
      }
    }
  }
  &>.content{
    height: calc(100% - #{pxTvh(84)});
    &>.content-top{
     height: pxTvh(32);
     margin-bottom: pxTvh(18);
     display: flex;
     align-items: center;
     justify-content: flex-end;
     &>.chart,&>.list{
       width: pxTvw(110);
       height: pxTvh(32);
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #394255;
       border-radius: pxTvw(2);
       cursor: pointer;
       &>img{
         width: pxTvw(14);
         height: pxTvh(14);
         margin-right: pxTvw(8);
       }
       &>.text{
        @include computed_font(14);
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
       }
     }
     &>.active{
      background: #55607A;
      
     }
     &>.chart{
       margin-right: pxTvw(16);
     }

    }
    &>.content-main{
      height: calc(100% - #{pxTvh(50)});
      &>.chart-content{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        &>.chart-item{
          width: pxTvw(608);
          height: pxTvh(397);
          background-color: #13264F;
          padding: pxTvh(32) pxTvw(32) pxTvh(16);
          box-sizing: border-box;
          &>.chart-box{
            height: calc(100% - #{pxTvh(23)});
            padding-top: pxTvh(16);
            box-sizing: border-box;
            // background-color: #fff;
          }
        }
        &>.w1240{
          width: pxTvw(1240);
        }
      }
      &>.list-content{
        width: 100%;
        height: 100%;
        padding: pxTvh(16) pxTvw(32) pxTvh(26);
        background-color: #13264F;
        box-sizing: border-box;
        &>.list{
          height: calc(100% - pxTvh(48));
          margin-bottom: pxTvh(16);
        }
        &>.list-bottom{
          height: pxTvh(32);
        }
      }
    }
  }
}
.el-table__empty-text{
  color: #fff!important;
}